<template>
  <div class="login-register-form">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="姓名" prop="name">
        <el-input type="text" v-model="ruleForm.name" autocomplete="off" clearable />
      </el-form-item>

      <el-form-item label="工号/学号" prop="workId">
        <el-input type="text" v-model="ruleForm.workId" autocomplete="off" clearable />
      </el-form-item>

      <el-form-item label="用户名" prop="username">
        <el-input type="text" v-model="ruleForm.username" autocomplete="off" clearable />
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" show-password v-model="ruleForm.password" autocomplete="off" clearable />
      </el-form-item>

      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" show-password v-model="ruleForm.checkPass" autocomplete="off" clearable />
      </el-form-item>

      <el-form-item label="学院" prop="college">
        <el-select v-model="ruleForm.college" filterable placeholder="请选择学院">
          <el-option v-for="item in colleges" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="职位" prop="post">
        <el-select v-model="ruleForm.post" placeholder="请选择职位">
          <el-option label="学生" value="student"></el-option>
          <el-option label="教师" value="teacher"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="success" plain  @click="submitForm('ruleForm')" :loading="loading">注册</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import request from '@/utils/requestMethod';
import apis from '@/utils/api';
import { Message } from 'element-ui';

export default {
  mounted() {
    this.fetchColleges();
  },

  data() {
    /**
     *  对姓名进行校验
     */
    const validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入姓名'));
      } else if (value.length > 20) {
        callback(new Error('姓名不能超过20位'));
      } else {
        callback();
      }
    };

    /**
     *  对工号或学号进行校验
     */
    const validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else if (value.length > 20) {
        callback(new Error('用户名不能超过20位'));
      } else {
        callback();
      }
    };

    /**
     *  对用户名进行校验
     */
    const validateWorkId = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入工号或学号'));
      } else if (value.length > 20) {
        callback(new Error('工号或学号不能超过20位'));
      } else {
        callback();
      }
    };

    /**
     *  对密码进行校验
     */
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length > 20) {
        callback(new Error('密码不能超过20位'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };

    /**
     *  对密码进行二次校验
     */
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    /**
     *  对学院进行校验
     */
    const validateCollege = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择学院'));
      } else {
        callback()
      }
    };

    /**
     *  对职位进行校验
     */
    const validatePost = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择职位'));
      } else {
        callback()
      }
    };

    return {
      ruleForm: {
        name: '',
        workId: '',
        username: '',
        password: '',
        checkPass: '',
        college: '',
        post: ''
      },
      colleges: [],
      loading: false,
      rules: {
        name: [
          { validator: validateName, trigger: 'blur' }
        ],
        workId: [
          { validator: validateWorkId, trigger: 'blur' }
        ],
        username: [
          { validator: validateUsername, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        college: [
          { validator: validateCollege, trigger: 'blur' }
        ],
        post: [
          { validator: validatePost, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    /**
     *  获取所有学院信息
     */
    fetchColleges() {
      request(apis.fetchCollegeList).then(res => {
        const {
          objects
        } = res.data;

        if (objects.length > 0) {
          const colleges = [];
          objects.forEach(item => {
            const tempObj = {
              label: item.name,
              value: item.name
            };
            colleges.push(tempObj);
          })
          this.colleges = colleges;
        }
      })
    },

    /**
     *  提交注册表单
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          request(apis.register, {
            method: 'POST',
            body: this.ruleForm
          }).then(res => {
            const {
              objects,
              message
            } = res.data;

            if (objects.length > 0) {
              Message.success(message);
              this.$emit("registerSuccess", true)
            } else {
              Message.error(message);
            }
          }).finally(() => {
            this.loading = false;
          })
        } else {
          console.log('error submit!!');
          this.loading = false;
          return false;
        }
      });
    }
  }
}
</script>